<template>
  <div>
    <a-form layout="inline" :model="queryModel" v-if="searchBox">
      <a-form-item label="菜单名称">
        <a-input v-model:value="queryModel.keyWord" placeholder="请输入菜单名称" />
      </a-form-item>
      <a-form-item label="菜单状态" name="region">
        <a-select v-model:value="queryModel.status" placeholder="请选择菜单状态">
          <a-select-option value="0">禁止</a-select-option>
          <a-select-option value="1">正常</a-select-option>
        </a-select>
      </a-form-item>
      <a-space>
        <a-button type="primary" @click="getMenus">查询</a-button>
        <a-button @click="resetQuery">重置</a-button>
      </a-space>
    </a-form>
    <div class="functionBox">
      <a-space class="left">
        <a-button type="dashed" :icon="h(PlusOutlined)" @click="operator(0)">新增</a-button>
      </a-space>
      <a-space class="right">
        <a-button size="small" shape="circle" :icon="h(ReloadOutlined)" @click="getMenus()" />
        <a-button size="small" shape="circle" :icon="h(SearchOutlined)" @click="() => searchBox = !searchBox" />
      </a-space>
    </div>

    <div ref="basePoint" :style="`height: ${ windowHeight - elementToTopHight - 7 }px !important;`">
      <a-table
          :columns="columns"
          @resizeColumn="handleResizeColumn"
          :pagination="false"
          :locale="{ emptyText: '暂无数据' }"
          :data-source="data"
          :scroll="{ y: ( windowHeight - elementToTopHight - 116 ) + 'px' }"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'icon'">
              <a-image
                  v-if="record.icon"
                  style="border-radius: 8px;"
                  :width="45"
                  :src="proxy.PicPrefixUrl + record.icon"
              />
          </template>
          <template v-if="column.key === 'type'">
            <a-tag color="#2db7f5" v-if="record.type == 0">目录</a-tag>
            <a-tag color="#87d068" v-else-if="record.type == 1">菜单</a-tag>
            <a-tag color="#108ee9" v-else-if="record.type == 2">按钮</a-tag>
          </template>
          <template v-if="column.key === 'createTime'">
            <span>{{proxy.parseTime(record.createTime, '{y}-{m}-{d} {h}:{i}:{s}')}}</span>
          </template>
          <template v-if="column.key === 'status'">
            <a-tag v-if="record.status == 1" color="success">正常</a-tag>
            <a-tag v-if="record.status == 0" color="error">禁止</a-tag>
          </template>
          <template v-if="column.key === 'action'">
              <a-button type="link" @click="operator(0,null ,record.id)">新增</a-button>
              <a-button type="link" @click="operator(1,record.id)">编辑</a-button>
              <a-popconfirm title="是否要真的批量删除这个菜单嘛!" @confirm="deleteMenu(record.id)">
                <template #icon><question-circle-outlined style="color: red" /></template>
                <a-button type="link" >删除</a-button>
              </a-popconfirm>
          </template>
        </template>
      </a-table>
      <div class="pagination">
        <a-pagination
            size="small"
            :disabled="total == 0"
            :total="total"
            show-size-changer
            @change="pageChange"
            show-quick-jumper />
      </div>
    </div>

    <a-modal
        width="620px"
        v-model:open="operatorStore.open"
        :title="operatorStore.cmd == 0 ? '新增菜单' : '编辑菜单'"
        @ok="submitOperator"
        @cancel="resetFrom">
      <a-form
          :model="menu"
          labelAlign="right"
          :label-col="{ style: { width: '80px' } }"
          :rules="rules"
          ref="formRef"
      >
        <a-form-item label="上级目录">
          <a-tree-select
              checkable
              v-model:value="menu.pId"
              defaultValue='主类目'
              :allowClear="true"
              showSearch
              style="width: 100%"
              :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
              placeholder="选择上级菜单"
              tree-default-expand-all
              :fieldNames="{ children:'children', label:'menuName', value: 'id' }"
              :tree-data="treeMenu"
              tree-node-filter-prop="menuName"
          />
        </a-form-item>
        <a-form-item label="菜单类型" name="type">
          <a-radio-group v-model:value="menu.type">
            <a-radio :value="0">目录</a-radio>
            <a-radio :value="1">菜单</a-radio>
            <a-radio :value="2">按钮</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="菜单图标" v-if="menu.type != 2" name="icon">
          <a-upload
              name="file"
              list-type="picture-card"
              class="avatar-uploader"
              :show-upload-list="false"
              :action="proxy.UploadUrl"
              @change="handleUpload"
          >
            <div v-if="menu.icon">
              <img :src="proxy.PicPrefixUrl + menu.icon"  alt="avatar" class="iconPre" />
            </div>
            <div v-else>
              <loading-outlined v-if="loading"></loading-outlined>
              <plus-outlined v-else></plus-outlined>
              <div class="ant-upload-text">Upload</div>
            </div>
          </a-upload>
        </a-form-item>
        <a-row :gutter="[18,0]">
          <a-col :span="12">
            <a-form-item label="菜单名称" name="menuName">
              <a-input v-model:value="menu.menuName" placeholder="请输入菜单名称" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="排序" name="sortOrder">
              <a-input type="number" v-model:value="menu.sortOrder" placeholder="请输入排序(越大越靠前)" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="[18,0]">
          <a-col :span="12" v-if="menu.type != 2">
            <a-form-item label="是否是外链" name="isExternalLink">
              <a-radio-group v-model:value="menu.isExternalLink">
                <a-radio :value="0">否</a-radio>
                <a-radio :value="1">是</a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="菜单状态" name="status">
              <a-radio-group v-model:value="menu.status">
                <a-radio :value="0">禁止</a-radio>
                <a-radio :value="1">正常</a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="[18,0]">
          <a-col :span="12" v-if="menu.type != 2" >
            <a-form-item label="路由地址">
              <a-input  v-model:value="menu.url" placeholder="请输入路由地址" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="权限标识" name="permissionCode">
              <a-input v-model:value="menu.permissionCode" placeholder="请输入权限标识" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="[18,0]">
          <a-col :span="12">
            <a-form-item label="备注">
              <a-input v-model:value="menu.remark" placeholder="请输入备注" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-modal>


  </div>
</template>

<script setup lang="ts">

  import useMenu from '@/hooks/useMenu';

  import { PlusOutlined, LoadingOutlined , ReloadOutlined , SearchOutlined  , QuestionCircleOutlined } from '@ant-design/icons-vue';
  import { getCurrentInstance , h } from 'vue';
  import DynamicHeight from "@/utils/DynamicHeight";


  const { proxy } = getCurrentInstance() as any;

  const {
    queryModel , resetQuery , columns ,
    data , operatorStore , submitOperator ,
    operator , menu , handleUpload , loading , searchBox,
    rules , formRef , resetFrom , getMenus , deleteMenu ,
    total , pageChange , treeMenu , expansion ,
    handleResizeColumn
  } = useMenu();

  const { basePoint , windowHeight , elementToTopHight } = DynamicHeight();

</script>

<style scoped lang="scss">
    .functionBox {
      margin: 18px 0 12px 0;
      display: flex;
      justify-content: space-between;
    }
    .url {
      cursor: pointer;
    }
    svg {
      opacity: 0.7;
    }
    .iconPre {
      height: 100px;
      width: 100px;
      border-radius: 8px;
    }
    .pagination {
      margin: 8px 0;
      display: flex;
      justify-content: end;
    }
</style>
